<template>
	<view class="guide-container">
		<view class="guide-box">
		<view class="bigBox2-box2" @click="goToguideDetail(1)">
			<text class="box2-title">就诊前准备</text>
			<text class="box2-subtitle">做好这些，看诊更顺利</text>
			<view class="box2-img"><image src="/static/ready.png"></image></view>
		</view>
		<view class="bigBox2-box2" @click="goToguideDetail(2)">
			<text class="box2-title">就诊流程</text>
			<text class="box2-subtitle">一步步带您完成看诊</text>
			<view class="box2-img"><image src="/static/process.png"></image></view>
		</view>
		<view class="bigBox2-box2" @click="goToguideDetail(3)">
			<text class="box2-title">就诊后</text>
			<text class="box2-subtitle">离院后这些事别忘记</text>
			<view class="box2-img"><image src="/static/after.png"></image></view>
		</view>
		<view class="bigBox2-box2" @click="goToguideDetail(4)">
			<text class="box2-title">其他问题</text>
			<text class="box2-subtitle">常见问题一键解答</text>
			<view class="box2-img"><image src="/static/problem.png"></image></view>
		</view>
		</view>
		<view class="guide-form">
			<view class="form-img" v-for="data in formData" :key="data.id"><image :src="data.fileUrl"></image></view>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted} from 'vue';
	import { getGuidelinesPhoto } from '@/api/guide';
	
	const formData = ref([]);
	
	const goToguideDetail = (type) => {
			uni.navigateTo({
				url: `/pages/guide/guideDetail?type=${type}`
			});
		};
	
	const fetchForm = async () => {
		uni.showLoading({
		   title: '加载中...', // 提示文字
		   mask: true // 开启蒙层防止用户误操作
		 });
		 try{
			 const res = await getGuidelinesPhoto();
			 if(res.code === '200'){
				 formData.value = res.data;
			 }
			 uni.hideLoading({
			   success: (response) => {
			   },
			   complete: response => {
			   }
			 });
		 }catch(error){
			 console.error("接口请求失败:", error);
		 }
	};
	
	onMounted(() => {
		fetchForm();
	});
</script>

<style lang="scss">
	.guide-container{
	height: 100vh;
	background-color: #F8F5FF;
	display: flex;
	justify-content: center;
	position: relative;
	.guide-box{
		height: 800rpx;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		position: absolute;
	.bigBox2-box2{
		width: 650rpx;
	    height: 180rpx;
		background: linear - gradient(45deg, #FDD1E9, #FFEAF6);
		border-radius: 20rpx;
		position: relative;
		.box2-title{
			font-size: 30rpx;
			font-weight: 700;
			color: #BA3E77;
			position: absolute;
			left: 40rpx;
			top: 30rpx;
		}
		.box2-subtitle{
			font-size: 23rpx;
			color: #D25991;
			position: absolute;
			left: 40rpx;
			top: 80rpx;
		}
		.box2-img{
			width: 120rpx;
			height: 120rpx;
			position: absolute;
			top: 30rpx;
			right: 30rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	}
	.guide-form{
		background-color: #fff;
		width: 100vw;
	    top: 850rpx;
		position: absolute;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		.form-img{
			width: 700rpx;
			height: 1000rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	}
</style>